import classNames from "classnames";
import { type FC } from "react";
import { useDebounceFn, useMemoizedFn } from "ahooks";
import { produce } from "immer";
import { Switch } from "antd";
import contentStyle from '../../index.module.scss'
import styles from '../index.module.scss'
import ApplyAccentColor from "./applyAccentColor";
import ColorItem from "./colorItem";
import { useCustomizationStore, usePersonalDetailsStore } from "@/store";
import { updateCustomization } from "@/service";

interface IndexProps {

}

const Index: FC<IndexProps> = () => {
  const { updateColors, customization } = useCustomizationStore(state => state, (o, n) => {
    return o.customization.layout.detailsPosition === n.customization.layout.detailsPosition && o.customization.colors === n.customization.colors
  })

  const { colors, layout } = customization
  const { mode } = colors
  const onChange = useMemoizedFn((key1, key2, v) => {
    const data = produce(customization.colors, (draft) => {
      draft[key1][key2] = v
    })
    updateColors(data)
  })
  const onChangeMode = useMemoizedFn((key, v) => {
    const data = produce(customization.colors, (draft) => {
      draft[key] = v
    })
    updateColors(data)
  })
  return (<div className={classNames(styles.colors, contentStyle.card)} >
    <h1 className={contentStyle.title} style={{ marginBottom: '30px' }}>色彩
      <Switch checkedChildren="复杂" unCheckedChildren="简单" size='small' style={{ marginLeft: '20px' }} value={mode !== 'simple'} onChange={(e) => {
        onChangeMode('mode', e ? '' : 'simple')
      }}/>
    </h1>
    {
      mode !== 'simple'
        ? <div className={styles.colorBodyWrapper}>
          <div className={styles.direction}>
            {
              layout.detailsPosition === 'top' ? '上' : layout.detailsPosition === 'left' ? '左' : '右'
            }

          </div>
          <div className={styles.colorBody}>
            <div className={styles.colorItem}>
              <div>文字颜色</div>
              <ColorItem onChange={(color) => {
                onChange('light', 'textColor', color)
              }} color={colors.light.textColor} style={{ left: '0px' }}></ColorItem>
            </div>
            <div className={styles.colorItem}>
              <div>背景颜色</div>
              <ColorItem onChange={(color) => {
                onChange('light', 'backgroundColor', color)
              }} color={colors.light.backgroundColor} style={{ left: '-90px' }}></ColorItem>
            </div>
            <div className={styles.colorItem}>
              <div>点缀颜色</div>
              <ColorItem onChange={(color) => {
                onChange('light', 'accentColor', color)
              }} color={colors.light.accentColor} style={{ left: '-175px' }}></ColorItem>
            </div>
          </div>
        </div>
        : null
    }

    <div className={styles.colorBodyWrapper}>
      {
        mode !== 'simple'
          ? <div className={styles.direction}>
            {
              layout.detailsPosition === 'top' ? '下' : layout.detailsPosition === 'left' ? '右' : '左'
            }
          </div>
          : null
      }

      <div className={styles.colorBody}>
        <div className={styles.colorItem}>
          <div>文字颜色</div>
          <ColorItem onChange={(color) => {
            onChange('strong', 'textColor', color)
          }} color={colors.strong.textColor} style={{ left: '0px' }}></ColorItem>
        </div>
        <div className={styles.colorItem}>
          <div>背景颜色</div>
          <ColorItem onChange={(color) => {
            onChange('strong', 'backgroundColor', color)
          }} color={colors.strong.backgroundColor} style={{ left: '-90px' }}></ColorItem>
        </div>
        <div className={styles.colorItem}>
          <div>点缀颜色</div>
          <ColorItem onChange={(color) => {
            onChange('strong', 'accentColor', color)
          }} color={colors.strong.accentColor} style={{ left: '-175px' }}></ColorItem>
        </div>
      </div>
    </div>
    <ApplyAccentColor style={ mode === 'simple' ? { marginLeft: 0 } : {}} />

  </div>);
}

export default Index;
